<template>
  <div class="common-title" :style="{'background': 'rgba(255,255,255,' + opacityStyle + ')'}" :class="{'titleBg': isAlways ? isAlways : showSignUp,}">
    <div @click="backToApp" class="back">
      <svg t="1604493158145" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2077" width="220" height="220"><path d="M766.862 1021.724c-10.24 0-20.594-3.64-28.444-10.922L228.693 538.396c-15.701-14.563-15.701-38.229 0-52.792L738.418 13.198c15.701-14.563 41.187-14.563 56.889 0 15.701 14.564 15.701 38.23 0 52.793L314.027 512l481.28 446.009c15.701 14.563 15.701 38.23 0 52.793-7.851 7.282-18.205 10.922-28.445 10.922z" p-id="2078"></path></svg>
    </div>
    <div class="title ellipsis">{{title}}</div>
    <div class="options"></div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: 'CommonTitleBar',
  data () {
    return {
      opacityStyle: 0
    }
  },
  computed: mapState({
    showSignUp: state => {
      return state.maskState;
    },
    title: state => {
      return state.title;
    },
    isAlways: state => {
      return state.isAlways;
    },
  }),
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  unmounted () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    backToApp () {
      window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('goBack')
    },
    handleScroll () {
      if (window.scrollY >= 50 && window.scrollY <= 150) {
        this.opacityStyle = (window.scrollY - 50) / 100
      } else if (window.scrollY < 50) {
        this.opacityStyle = 0
      } else if (window.scrollY > 150) {
        this.opacityStyle = 1
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .common-title{
    position: fixed;
    top: 0;
    padding-top: constant(safe-area-inset-top); /* 兼容 iOS < 11.2 */
    padding-top: env(safe-area-inset-top);
    width: 100%;
    height: 44px;
    background: rgba(255, 255, 255, 0);
    z-index: 999;
    display: flex;

    .back{
      width: 20%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      svg{
        width: 16px;
        height: 16px;
      }
    }
    .title{
      flex: 1;
      font-size: 18px;
      line-height: 44px;
      text-align: center;
    }
    .options{
      width: 20%;
      height: 100%;
    }
  }
  .titleBg{
    background: #fff !important;
  }
</style>
